import React,{Component,PropTypes} from 'react';
import {Tag} from 'antd';

import './style.less';


const CheckableTag = Tag.CheckableTag;


export default  class Tags extends React.Component {
    state = {
        selectedTags: [],

    };

    // 编辑状态
    componentWillReceiveProps(nextProps){
        const {default_tags,Pid} = nextProps;
        const {tempTags,selectedTags} = this.state;

        if(Pid&&!tempTags){
            this.state={selectedTags:default_tags,tempTags:true}
        }

    };


    getSubIdx =(tag,tagsFromServer)=>{
        let idx ;
        tagsFromServer.map((v,k)=>{
            tag == v? idx=k :null;
        });

        return idx;
    };

    handleChange(tag, checked) {
        const {id,getStandard,tagsFromServer} = this.props;

        const { selectedTags } = this.state;
        const nextSelectedTags = checked ?
            [...selectedTags, tag] :
            selectedTags.filter(t => t !== tag);
        // console.log('当前选择的标签是: ', nextSelectedTags);

        const temp = [];
        nextSelectedTags.map(v=>{
            let idx =  this.getSubIdx(v,tagsFromServer);
            let obj={id:id,identify:[id,idx],tag:v};
            temp.push(obj)
        });

        getStandard(id,temp);

        this.setState({ selectedTags: nextSelectedTags });

    }

    render() {
        const {selectedTags } = this.state;
        const {title,tagsFromServer} = this.props;

        return (
            <div className="product-standard_tags-wrap">
                <strong style={{ marginRight: 8 }}>{title}:</strong>

                {tagsFromServer.map(tag => (

                    <CheckableTag
                        className="product-standard_tags"
                        key={tag}
                        checked={selectedTags.indexOf(tag) > -1}   // 新思路
                        onChange={checked => this.handleChange(tag, checked)}
                    >
                        {tag}
                    </CheckableTag>

                ))}
            </div>
        );
    }
}